![\"custom-directives\"](\"https://github.com/sudheerj/vuejs-interview-questions/blob/master/images/custom-directives.svg\")
\n\n프론트 엔드 면접 질문용(Vue) 공부 후 정리 자료입니다. 정확하지 않을 수 있으니 꼭 다시 책이나 자료를 참고하여 공부하세요
\n
Vue.js는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크입니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어, 다른 라이브러리나 기존 프로젝트와의 통합이 쉽습니다.
아래의 항목들은 VueJS의 주요 특징들입니다.
\n![\"img\"](\"https://github.com/sudheerj/vuejs-interview-questions/raw/master/images/vuelifecycle.png\")
\nCreation(초기화): Create 훅은 컴포넌트가 DOM에 추가되기 전에 실행되는 단계입니다. 클라이언트와 서버가 렌더링 단계 전에 컴포넌트에 설정해야 할 것들이 있을 때 사용하는 단계입니다. 다른 훅과는 다르게, Create 훅은 서버 사이드 렌더링에서도 지원되는 훅입니다.
\nbeforeCreate 훅은 컴포넌트 초기화 단계 중 가장 처음으로 실행됩니다. 이 훅에서는 컴포넌트의 data를 관찰하고, 이벤트를 초기화합니다. 이 단계에서 data는 아직까지 반응적이지 않으며, 컴포넌트의 라이프사이클에서 발생하는 이벤트 역시 설정되지 않은 상태입니다. new Vue({\n data: {\n count: 10\n },\n beforeCreate: function () {\n console.log('Nothing gets called at this moment')\n // `this` points to the view model instance\n console.log('count is ' + this.count);\n }\n })\n // count is undefinedcreated 훅은 Vue 인스턴스가 이벤트를 설정하고 data를 관찰할 때 발생합니다. 이 단계에서 템플릿은 아직 마운트되거나 렌더링되지 않았지만, 이벤트들이 활성화되며 data에 반응적으로 접근하는 것이 가능합니다. new Vue({\n data: {\n count: 10\n },\n created: function () {\n // `this` points to the view model instance\n console.log('count is: ' + this.count)\n }\n })\n // count is: 10주의: Create 훅에서는 DOM에 직접 접근하거나 마운트할 엘리먼트(this.$el)에 직접 접근할 수 없다는 점을 기억하세요.
Mounting(DOM 추가): Mount 훅은 가장 많이 사용되는 단계로, 컴포넌트가 렌더링되기 직전이나 직후에 컴포넌트에 접근할 수 있는 단계입니다.
\nbeforeMount 훅은 컴포넌트가 DOM에 추가되기 직전에 실행되는 훅입니다. new Vue({\n beforeMount: function () {\n // `this` points to the view model instance\n console.log(`this.$el is yet to be created`);\n }\n })mounted 훅은 반응적인 data, 템플릿, 렌더링된 DOM(this.$el) 모두에 접근할 수 있어서 가장 많이 사용되는 훅입니다. 흔히 컴포넌트에서 필요한 데이터를 외부에서 가져오는(fetch) 용도로 많이 사용됩니다.<div id=\"app\">\n <p>I’m text inside the component.</p>\n</div>\n new Vue({\n el: '#app',\n mounted: function() {\n console.log(this.$el.textContent); // I'm text inside the component.\n }\n })Updating (재 렌더링): Update 훅은 컴포넌트 내부의 반응적인 속성이 변했거나, 그 외의 것들이 재 렌더링을 일으킬 때 실행되는 단계입니다.
\nbeforeUpdate 훅은 컴포넌트의 data가 변경되어 업데이트 사이클이 시작될 때 실행됩니다.<div id=\"app\">\n <p>{{counter}}</p>\n</div>\n...// rest of the code\n new Vue({\n el: '#app',\n data() {\n return {\n counter: 0\n }\n },\n created: function() {\n setInterval(() => {\n this.counter++\n }, 1000)\n },\n\n beforeUpdate: function() {\n console.log(this.counter) // Logs the counter value every second, before the DOM updates.\n }\n })updated 훅은 컴포넌트의 data가 변하여 재 렌더링이 일어난 후에 실행됩니다.<div id=\"app\">\n <p ref=\"dom\">{{counter}}</p>\n</div>\n...//\n new Vue({\n el: '#app',\n data() {\n return {\n counter: 0\n }\n },\n created: function() {\n setInterval(() => {\n this.counter++\n }, 1000)\n },\n updated: function() {\n console.log(+this.$refs['dom'].textContent === this.counter) // Logs true every second\n }\n })Destruction(해체): Destruction 훅은 컴포넌트를 더 이상 사용하지 않을 때 사용하는 단계입니다.
\nbeforeDestroy 훅은 컴포넌트가 해체되기 직전에 실행됩니다. 이 훅은 반응적인 이벤트들이나 data들을 해체하는 훅으로 적합합니다. 이 단계에서 컴포넌트는 여전히 문제없이 잘 동작합니다.new Vue ({\n data() {\n return {\n message: 'Welcome VueJS developers'\n }\n },\n\n beforeDestroy: function() {\n this.message = null\n delete this.message\n }\n})destroyed 훅은 컴포넌트가 해체되고 난 직후에 호출됩니다. 모든 지시자들의 바인딩이 해제되었으며, 이벤트 리스너가 제거된 상태입니다.new Vue ({\n destroyed: function() {\n console.log(this) // Nothing to show here\n }\n })VueJS는 조건에 따라 엘리먼트를 보여주거나 숨길 수 있는 지시자들을 제공합니다. 사용할 수 있는 지시자들은 v-if, v-else, v-else-if and v-show가 있습니다.
\n1. v-if: v-if 지시자는 조건에 따라 DOM 엘리먼트를 추가하거나 제거합니다. 예를 들어, 아래의 버튼은 isLoggedIn의 값이 false라면 나타나지 않습니다.
<button v-if="isLoggedIn">Logout</button>엘리먼트들을 <template> 태그로 감싼다면, 하나의 v-if만으로 여러 엘리먼트들의 조건을 설정할 수 있습니다. 예를 들어, 아래와 같이 label과 button 태그를 하나의 조건 지시자로 제어할 수 있습니다.
<template v-if="isLoggedIn">\n <label> Logout </button>\n <button> Logout </button>\n</template>2. v-else: 프로그래밍 언어에서 if의 조건에 맞지 않는 경우 else로 넘어가는 것처럼, v-else 지시자는 인접한 v-if 지시자 또는 v-else-if 지시자가 false일 때만 그 내용이 나타납니다. 이 지시자에는 조건을 지정할 필요가 없습니다. 예를 들어, 아래의 예시는 isLoggedIn이 false일 때(즉 로그인 된 상태가 아닐 때), v-else를 이용해 로그인 버튼을 보여줍니다.
<button v-if="isLoggedIn"> Logout </button>\n<button v-else> Log In </button>3. v-else-if: v-else-if 지시자는 v-if 이외의 다른 조건을 추가로 확인해야 할 때 사용합니다. 예를 들어, v-else-if 지시자를 이용해 ifLoginDisabled의 값이 true일 때는 로그인 버튼 대신 텍스트를 보여줄 수 있습니다.
<button v-if="isLoggedIn"> Logout </button>\n<label v-else-if="isLoginDisabled"> User login disabled </label>\n<button v-else> Log In </button>4. v-show: v-show 지시자는 v-if 지시자와 비슷한 기능을 하지만, DOM에 엘리먼트가 추가된 상태에서 CSS의 display 값을 이용해 보여주고 숨김을 결정합니다. v-show 지시자는 조건문이 자주 토글될 때 권장됩니다.
\n<span v-show="user.name">Welcome user,{{user.name}}</span>v-show와 v-if의 주요 차이점은 다음과 같습니다.
\n<template>태그에서 사용할 수 있지만 v-show는 사용할 수 없습니다.v-for 지시자는 배열이나 객체를 순환하면서 반복적인 렌더링을 가능하게 합니다.
\n<ul id="list">\n <li v-for="(item, index) in items">\n {{ index }} - {{ item.message }}\n </li>\n</ul>\n\nvar vm = new Vue({\n el: '#list',\n data: {\n items: [\n { message: 'John' },\n { message: 'Locke' }\n ]\n }\n})자바스크립트 순환문과 유사하게, in 외에도 of를 사용할 수 있습니다.
<div id="object">\n <div v-for="(value, key, index) in user">\n {{ index }}. {{ key }}: {{ value }}\n </div>\n</div>\n\nvar vm = new Vue({\n el: '#object',\n data: {\n user: {\n firstName: 'John',\n lastName: 'Locke',\n age: 30\n }\n }\n})모든 Vue 어플리케이션은 Vue 함수를 이용해 Vue 인스턴스를 생성하면서 동작합니다. 일반적으로 vm(ViewModel의 축약형)이라는 변수를 이용해 Vue 인스턴스를 참조합니다. 아래와 같은 방법으로 Vue 인스턴스를 생성할 수 있습니다.
var vm = new Vue({\n // options\n})위의 코드에서 볼 수 있듯, 옵션을 설정하기 위한 객체를 전달해야 합니다. 이 옵션은 API 문서에서 자세히 확인할 수 있습니다.
\n렌더링에 영향을 미치지 않는 <template> 태그에 v-if 지시자를 적용함으로써 여러 엘리먼트들을 한 번에 조건부로 나타낼 수 있습니다. 예를 들어, 아래와 같이 유효한 사용자인 경우에 한해서 사용자 정보를 보여줄 수 있습니다.
<template v-if="condition">\n <h1>Name</h1>\n <p>Address</p>\n <p>Contact Details</p>\n</template>Vue는 가능한 한 엘리먼트를 효율적으로 렌더링하려 합니다. 그래서 엘리먼트를 처음부터 다시 만들기보다는 재사용하려 합니다. 그러나 이는 몇 가지 상황에서 문제를 일으킬 수 있습니다. 예를 들어, input 엘리먼트를 v-if와 v-else 블록 양쪽에서 사용하면, input 엘리먼트는 조건문에 따라 바뀌지 않고 최초에 렌더링 된 엘리먼트의 상태를 유지하고 있습니다.
<template v-if="loginType === 'Admin'">\n <label>Admin</label>\n <input placeholder="Enter your ID">\n</template>\n<template v-else>\n <label>Guest</label>\n <input placeholder="Enter your name">\n</template>이 경우에서 input 엘리먼트는 재사용되어서는 안 되기 때문에, key 속성을 이용해 두 개의 input 엘리먼트를 별개의 것으로 취급하도록 선언할 수 있습니다.
<template v-if="loginType === 'Admin'">\n <label>Admin</label>\n <input placeholder="Enter your ID" key="admin-id">\n </template>\n <template v-else>\n <label>Guest</label>\n <input placeholder="Enter your name" key="user-name">\n </template>위의 경우는 두 개의 input 엘리먼트가 별개의 것으로 취급되며 서로에게 어떤 영향도 끼치지 않습니다.
v-for 지시자는 v-if 보다 더 높은 우선 순위를 갖고 있기 때문에, 한 엘리먼트 내에서 v-for와 v-if를 함께 쓰는 것은 권장되지 않습니다. 일반적으로 다음과 같은 이유 때문에 두 지시자를 함께 쓰곤 합니다.
\n<ul>\n <li\n v-for="user in users"\n v-if="user.isActive"\n :key="user.id"\n >\n {{ user.name }}\n <li>\n</ul>이 경우는 아래와 같이 사전에 computed 속성을 이용해 필터링된 리스트를 만들어 사용할 수 있습니다.
\ncomputed: {\n activeUsers: function () {\n return this.users.filter(function (user) {\n return user.isActive\n })\n }\n}\n...... //\n...... //\n<ul>\n <li\n v-for="user in activeUsers"\n :key="user.id">\n {{ user.name }}\n <li>\n</ul><ul>\n <li\n v-for="user in users"\n v-if="shouldShowUsers"\n :key="user.id"\n >\n {{ user.name }}\n <li>\n</ul>이 경우는 아래와 같이 조건문을 상위 엘리먼트로 옮김으로써 해결할 수 있습니다.
\n<ul v-if="shouldShowUsers">\n <li\n v-for="user in users"\n :key="user.id"\n >\n {{ user.name }}\n <li>\n</ul><div v-for="item in items" :key="item.id">\n {{item.name}}\n</div>이름에서 볼 수 있듯, 배열을 변화시키는 함수(mutation methods)는 원본 배열을 변경시킵니다. 아래의 함수는 뷰(view) 업데이트를 일으킵니다.
\n예를 들어, 아래와 같이 todos 배열에 push 함수를 실행시키면 뷰 업데이트가 일어납니다.
vm.todos.push({ message: 'Baz' })배열을 대체하는 함수는 원본 배열을 수정하지 않고, 항상 새로운 배열을 반환합니다. 아래의 함수는 배열을 대체하는 함수입니다.
\n예를 들어, 아래와 같이 status 속성에 따라 todos 배열을 필터링한 새로운 배열을 반환받을 수 있습니다.
vm.todos = vm.todos.filter(function (todo) {\n return todo.status.match(/Completed/)\n})Vue가 DOM을 효율적으로 재사용하기 때문에, 전체 리스트가 새로 렌더링되지는 않습니다.
\nVue는 아래의 두 가지 경우의 변경 사항을 감지할 수 없습니다.
\nvm.todos[indexOfTodo] = newTodovm.todos.length = todosLength이는 set과 splice 함수를 이용해 해결할 수 있습니다.
첫 번째 경우
\n// Vue.set\nVue.set(vm.todos, indexOfTodo, newTodoValue)// Array.prototype.splice\nvm.todos.splice(indexOfTodo, 1, newTodoValue)두 번째 경우
\nvm.todos.splice(todosLength)Vue는 추가되거나 삭제된 속성에 반응형으로 접근할 수 없습니다.
\nvar vm = new Vue({\n data: {\n user: {\n name: 'John'\n }\n }\n})\n\n// `vm.name` is now reactive\n\nvm.email = john@email.com // `vm.email` is NOT reactive이 경우는 Vue.set(object, key, value)나 Object.assign()를 이용함으로써 반응형 속성을 추가할 수 있습니다.
Vue.set(vm.user, 'email', john@email.com);vm.user = Object.assign({}, vm.user, {\n email: john@email.com\n})v-for 지시자에 정수를 사용해 특정 횟수만큼 반복해 렌더링 할 수 있습니다.
<div>\n <span v-for="n in 20">{{ n }} </span>\n</div>이 경우 1부터 20까지 숫자가 출력됩니다.
\n<template>에서 v-if를 사용한 것과 유사하게, <template>에서 v-for 문법을 사용할 수 있습니다.
<ul>\n <template v-for="todo in todos">\n <li>{{ todo.title }}</li>\n <li class="divider"></li>\n </template>\n</ul>VueJS에서는 순수 자바스크립트와 유사하게 이벤트 핸들러를 사용할 수 있습니다. 함수에서 $event 변수를 호출해 사용할 수 있습니다.
<button v-on:click="show('Welcome to VueJS world', $event)">\n Submit\n</button>\n\nmethods: {\n show: function (message, event) {\n // now we have access to the native event\n if (event) event.preventDefault()\n console.log(message);\n }\n}일반적으로 자바스크립트에서는 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 제공합니다. Vue의 메소드 내부에서도 이 작업을 할 수 있지만, DOM에서 발생한 이벤트와 메소드의 로직은 별개로 구분하는 것이 좋습니다.
이 문제를 해결하기 위해, Vue는 v-on 이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 표시된 접미사 입니다.
.stop.prevent.capture.self.once.passive.stop 수식어를 예로 들어보겠습니다.
<!-- the click event's propagation will be stopped -->\n<a v-on:click.stop="methodCall"></a>수식어는 연속해서 사용할 수 있습니다.
\n<!-- modifiers can be chained -->\n<a v-on:click.stop.prevent="doThat"></a>Vue는 키보드 이벤트를 제어하기 위해 v-on 지시자에 키 수식어를 제공합니다.
<!-- only call `vm.show()` when the `keyCode` is 13 -->\n<input v-on:keyup.13="show">모든 키 코드를 외우는 것은 어렵기 때문에, Vue에서는 자주 사용되는 키들은 별칭을 제공하고 있습니다.
\n.enter.tab.delete (“Delete”와 “Backspace” 포함).esc.space.up.down.left.right위 예시의 키 코드는 아래와 같이 별칭으로 다시 쓸 수 있습니다.
\n<input v-on:keyup.enter="submit">\n// (OR)\n<!-- with shorthand notation-->\n<input @keyup.enter="submit">키 코드 이벤트의 사용은 최신 브라우저에서는 지원되지 않을 수 있습니다.
\n전역 config.keyCodes 객체를 통해 키 수식어를 커스터마이징할 수 있습니다. 여기에는 몇 가지 규칙들이 있습니다.
Vue.config.keyCodes = {\n f1: 112,\n "media-play-pause": 179,\n down: [40, 87]\n}Vue에서는 다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트를 발생시킬 수 있습니다.
\n.ctrl.alt.shift.meta아래는 컨트롤 키가 눌린 상태에서 클릭 이벤트를 활성화 하는 예시입니다.
\n<!-- Ctrl + Click -->\n<div @click.ctrl="doSomething">Do something</div>Vue는 특정한 마우스 버튼으로 발생한 이벤트를 제어할 수 있습니다.
\n.left.right.middle마우스 이벤트로 .right를 이용한 예시입니다.
<button\n v-if="button === 'right'"\n v-on:mousedown.right="increment"\n v-on:mousedown.left="decrement"\n />v-model 지시자를 이용해 input, textarea, select 엘리먼트의 데이터를 양방향으로 제어할 수 있습니다. 아래의 input 엘리먼트를 살펴보세요.
<input v-model="message" placeholder="Enter input here">\n<p>The message is: {{ message }}</p>v-model은 모든 form 엘리먼트에서 HTML 속성(attribute)으로 선언된 value, checked 그리고 selected를 무시합니다. 그 대신 Vue 인스턴스에서 v-model로 바인딩한 값을 이용합니다. 따라서 컴포넌트의 data에서 초기값을 선언해야 합니다.
v-model 지시자에는 세 가지 수식어가 지원됩니다.
1. lazy: 기본적으로, v-model은 하나의 키 입력 이벤트가 발생할 때마다 data가 업데이트됩니다. 이를 방지하기 위해서는 .lazy 수식어를 이용합니다.
<!-- synced after "change" instead of "input" -->\n<input v-model.lazy="msg" >2. number: v-model에 .number 수식어를 붙이면 자동적으로 사용자의 입력의 자료형이 Number로 변환됩니다. HTML input 태그의 속성이 type="number"일지라도 반환되는 값의 자료형은 문자열이기 때문에, 숫자 자료형이 필요하다면 .number 수식어를 사용해야 합니다.
<input v-model.number="age" type="number">3. trim: .trim 수식어를 사용자 입력에서 처음과 끝에 들어있는 공백을 자동으로 제거해줍니다.
<input v-model.trim="msg">컴포넌트란 재사용 가능하면서 이름이 명명된 Vue 인스턴스입니다. 컴포넌트는 Vue처럼 data, computed, watch, methods, 라이프사이클 옵션을 갖고 있습니다. 아래는 Vue에 전역으로 컴포넌트를 추가하는 예시입니다.
\n// Define a new component called button-counter\nVue.component('button-counter', {\n template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'\n data: function () {\n return {\n count: 0\n }\n },\n})이 컴포넌트는 전역으로 선언되었기 때문에 Vue 인스턴스에서 사용할 수 있습니다.
\n<div id="app">\n <button-counter></button-counter>\n</div>\n\nvar vm = new Vue({ el: '#app' });props는 상위 컴포넌트의 정보를 하위 컴포넌트로 전달할 수 있는 사용자 지정의 속성입니다. 상위 컴포넌트에서 전달되는 props는 하위 컴포넌트의 속성으로 여겨지며, 하위 컴포넌트에서는 props 옵션을 사용하여 수신할 것으로 예상되는 props를 명시적으로 선언해야 합니다.
\nVue.component('todo-item', {\n props: ['title'],\n template: '<h2>{{ title }}</h2>'\n})하위 컴포넌트에서 props가 등록되고 나면, 상위 컴포넌트에서는 사용자 지정 속성을 이용해 값을 전달할 수 있습니다.
\n<todo-item title="Learn Vue conceptsnfirst"></todo-item>템플릿이 여러 개의 엘리먼트들로 구성되어 있을 때, 컴포넌트의 최상단 템플릿은 반드시 단일 엘리먼트로 감싸져 있어야 합니다.
\n<div class="todo-item">\n <h2>{{ title }}</h2>\n <div v-html="content"></div>\n</div>그렇지 않다면, "Component template should contain exactly one root element..."라는 에러를 발생시킵니다.
하위 컴포넌트에서 $event 객체를 이용해 상위 컴포넌트로 이벤트를 발생킬 수 있습니다.
Vue.component('todo-tem', {\n props: ['todo'],\n template: `\n <div class="todo-item">\n <h3>{{ todo.title }}</h3>\n <button v-on:click="$emit('increment-count', 1)">\n Add\n </button>\n <div v-html="todo.description"></div>\n </div>\n `\n})이 때 상위 컴포넌트에서는 v-on 지시자를 이용해 하위 컴포넌트에서 명명한 이벤트와 값을 사용할 수 있습니다.
<ul v-for="todo in todos">\n <li>\n <todo-item\n v-bind:key="todo.id"\n v-bind:todo="todo"\n v-on:increment-count="total += 1">\n </todo-item>\n </li>\n</ul>\n<span> Total todos count is {{total}}</span>사용자 정의 input 컴포넌트에서도 v-model을 활용할 수 있습니다. 해당 컴포넌트의 input은 아래 규칙들을 준수해야 합니다.
input의 value를 props를 이용해 바인딩합니다.input 이벤트 발생 시, 해당 값을 emit하여 상위 컴포넌트로 이벤트를 전달합니다.Vue.component('custom-input', {\n props: ['value'],\n template: `\n <input\n v-bind:value="value"\n v-on:input="$emit('input', $event.target.value)"\n >\n `\n})이 경우 상위 컴포넌트에서 v-model을 이용해 값을 바인딩할 수 있습니다.
<custom-input v-model="searchInput"></custom-input>Vue에서는 <slot>을 이용해 상위 컴포넌트에서 하위 컴포넌트 내부에 사용자 정의의 컨텐츠를 집어 넣을 수 있습니다. 하위 컴포넌트에 <slot>을 이용해 문구를 동적으로 넣을 수 있는 컴포넌트를 만들어봅시다.
Vue.component('alert', {\n template: `\n <div class="alert-box">\n <strong>Error!</strong>\n <slot></slot>\n </div>\n `\n})<alert> 태그 안에 넣은 값은 컴포넌트 내부의 <slot>의 컨텐츠로 들어가게 됩니다.
<alert>\n There is an issue with in application.\n</alert>Vue.component() 함수를 이용해 전역 등록할 수 있습니다.Vue.component('my-component-name', {\n // ... options ...\n})Vue.component('component-a', { /* ... */ })\nVue.component('component-b', { /* ... */ })\nVue.component('component-c', { /* ... */ })\n\nnew Vue({ el: '#app' })<div id="app">\n <component-a></component-a>\n <component-b></component-b>\n <component-c></component-c>\n</div>전역으로 등록한 컴포넌트들은 하위 컴포넌트에서도 사용이 가능합니다.
\n전역 등록으로 인해 사용되지 않는 컴포넌트가 빌드 시에 여전히 남아있을 수 있습니다. 이는 불필요한 자바스크립트를 만들죠. 이를 방지하기 위해, 아래와 같이 컴포넌트를 지역 등록할 수 있습니다.
\nvar ComponentA = { /* ... */ }\nvar ComponentB = { /* ... */ }\nvar ComponentC = { /* ... */ }지역 등록한 컴포넌트는 다른 컴포넌트의 하위에서는 사용할 수 없습니다. 이 경우, components 속성으로 컴포넌트를 추가해 사용할 수 있습니다.
var ComponentA = { /* ... */ }\n\nvar ComponentB = {\n components: {\n 'component-a': ComponentA\n },\n // ...\n}components 속성에 사용할 컴포넌트들을 정의할 수 있습니다.new Vue({\n el: '#app',\n components: {\n 'component-a': ComponentA,\n 'component-b': ComponentB\n }\n})지역 등록의 경우, 각 컴포넌트를 디렉토리에 생성하고 각각의 컴포넌트는 다른 컴포넌트 안에서 import 하여 사용하는 것이 권장됩니다. 만약 여러분들이 컴포넌트 C에서 컴포넌트 A와 B를 사용하고 싶다면 아래와 같은 설정을 해야 합니다.
import ComponentA from './ComponentA'\nimport ComponentB from './ComponentC'\n\nexport default {\n components: {\n ComponentA,\n ComponentB\n }\n}위의 경우 컴포넌트 A와 컴포넌트 B는 컴포넌트 C의 템플릿에서 사용할 수 있습니다.
\n전역 등록의 경우, 공통적으로 사용되는 컴포넌트를 각각의 파일에서 export해야합니다. 하지만 webpack과 같은 유명한 번들러들은 require.context라는 문법을 이용해서 컴포넌트를 쉽게 전역적으로 등록할 수 있게 해줍니다.
import Vue from 'vue'\nimport upperFirst from 'lodash/upperFirst'\nimport camelCase from 'lodash/camelCase'\n\nconst requireComponent = require.context(\n // The relative path of the components folder\n './components',\n // Whether or not to look in subfolders\n false,\n // The regular expression used to match base component filenames\n /Base[A-Z]\\w+\\.(vue|js)$/\n)\n\nrequireComponent.keys().forEach(fileName => {\n // Get component config\n const componentConfig = requireComponent(fileName)\n\n // Get PascalCase name of component\n const componentName = upperFirst(\n camelCase(\n // Strip the leading `./` and extension from the filename\n fileName.replace(/^\\.\\/(.*)\\.\\w+$/, '$1')\n )\n )\n\n // Register component globally\n Vue.component(\n componentName,\n // Look for the component options on `.default`, which will\n // exist if the component was exported with `export default`,\n // otherwise fall back to module's root.\n componentConfig.default || componentConfig\n )\n})props에는 타입을 지정할 수도, 지정하지 않을 수도 있습니다. 하지만 일반적으로 타입을 지정하면 다른 개발자들이 해당 코드에서 잘못된 타입의 props를 넘겨주는 실수를 줄여주기 때문에, 가능하면 타입을 지정해주는 것이 좋습니다.
props: {\n name: String,\n age: Number,\n isAuthenticated: Boolean,\n phoneNumbers: Array,\n address: Object\n}props 객체의 속성과 값을 선언함으로서, 타입을 선언할 수 있습니다.
모든 props는 하위 속성과 상위 속성 사이에서 단방향 바인딩을 형성합니다. 즉, 상위 속성이 변경되는 것은 하위 속성에게 전달되지만, 그 반대는 안됩니다. 원칙적으로, 하위 컴포넌트에서는 상위 컴포넌트에서 받은 props을 수정해서는 안됩니다.
하위 컴포넌트에서 props 수정의 필요성을 느낄 수 있는 몇 가지 경우가 있는데, 아래와 같은 방법으로 해결할 수 있습니다.
props는 하위 컴포넌트의 초기값 설정에만 사용되고 그 이후에는 로컬 데이터 속성으로 활용되는 경우:이 경우, 하위 컴포넌트에서 사용할 속성을 data에 선언하고, 그 값을 props로 초기화하면 됩니다.
props: ['defaultUser'],\ndata: function () {\n return {\n username: this.defaultUser\n }\n}props로 전해주는 값이 수정되는 경우이 경우, 하위 컴포넌트에서 computed 속성을 이용해 props의 값이 바뀔 때마다 신규 값을 얻을 수 있습니다.
props: ['environment'],\ncomputed: {\n localEnvironment: function () {\n return this.environment.trim().toUpperCase()\n }\n}props가 아닌 속성이란, 컴포넌트에 전달되기는 하지만 해당 props가 하위 컴포넌트에서 정의되지는 않은 속성을 말합니다. 만약 data-tooltip 속성을 요구하는 컴포넌트를 사용하고 있다고 가정해봅시다. 이 속성을 컴포넌트 인스턴스에 다음과 같이 추가 할 수 있습니다.
<custom-input data-tooltip="Enter your input" />상위 컴포넌트에서부터 props가 아닌 속성을 넘겨주려 한다면, 하위 컴포넌트에서 같은 이름을 가진 속성은 덮어씌워집니다. 하지만 class나 style같은 props는 예외로, 이 값들은 하위 컴포넌트와 합쳐집니다.
//Parent component\n<custom-input class="custom-class" />\n\n//Child component\n<input type="date" class="date-control">Vue에서는 타입, 필수 여부, 디폴트 값 등 props의 유효성 검증을 제공하고 있습니다. 아래와 같이 props를 검증하는 규칙이 속성으로 담긴 객체를 제공하면 됩니다.
Vue.component('user-profile', {\n props: {\n // Basic type check (`null` matches any type)\n age: Number,\n // Multiple possible types\n identityNumber: [String, Number],\n // Required string\n email: {\n type: String,\n required: true\n },\n // Number with a default value\n minBalance: {\n type: Number,\n default: 10000\n },\n // Object with a default value\n message: {\n type: Object,\n // Object or array defaults must be returned from\n // a factory function\n default: function () {\n return { message: 'Welcome to Vue' }\n }\n },\n // Custom validator function\n location: {\n validator: function (value) {\n // The value must match one of these strings\n return ['India', 'Singapore', 'Australia'].indexOf(value) !== -1\n }\n }\n }\n})일반적인 컴포넌트에서 v-model 지시자는 value를 props로 사용하고 input을 이벤트로 사용하지만, 체크 박스나 라디오 버튼같은 일부 입력 타입은 다른 목적으로 value 속성을 사용할 수 있습니다. 이런 경우에는 v-model을 커스터마이징해서 사용하는 것이 좋습니다.
Vue.component('custom-checkbox', {\n model: {\n prop: 'checked',\n event: 'change'\n },\n props: {\n checked: Boolean\n },\n template: `\n <input\n type="checkbox"\n v-bind:checked="checked"\n v-on:change="$emit('change', $event.target.checked)"\n >\n `\n})이 컴포넌트에서 v-model은 다음과 같이 사용할 수 있습니다.
<custom-checkbox v-model="selectFramework"></custom-checkbox>selectFramework 속성은 props 중 checked로 넘어갈 것이고, 체크 박스 컴포넌트에서 값이 변경되면 이벤트를 발생시킬 것입니다.
Vue에서는 항목들이 DOM에서 추가, 갱신 또는 삭제될 때, 다양한 방법으로 트랜지션 효과를 입힐 수 있습니다.
\nVue Router는 Vue에서 동작하는 공식적인 라우팅 라이브러리입니다.
\nVue를 사용하고 있다면, 쉽게 Vue Router를 통합할 수 있습니다.
\nStep 1: 먼저 템플릿에서 <router-link>태그를 설정합니다.
<script src="https://unpkg.com/vue/dist/vue.js"></script>\n<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>\n\n<div id="app">\n <h1>Welcome to Vue routing app!</h1>\n <p>\n <!-- use router-link component for navigation using `to` prop. It rendered as an `<a>` tag -->\n <router-link to="/home">Home</router-link>\n <router-link to="/services">Services</router-link>\n </p>\n <!-- route outlet in which component matched by the route will render here -->\n <router-view></router-view>\n</div>Step 2: main.js에서 Vue와 Vue 라우터를 import하고 Vue.use()함수를 이용해 호출합니다.
import Vue from 'vue';\nimport VueRouter from 'vue-router';\n\nVue.use(VueRouter)Step 3: 라우트 컴포넌트를 정의하거나 import합니다.
const Home = { template: '<div>Home</div>' }\nconst Services = { template: '<div>Services</div>' }Step 4: 라우트를 정의합니다. 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
\nconst routes = [\n { path: '/home', component: Home },\n { path: '/services', component: Services }\n]Step 5: routes 옵션과 함께 router 인스턴스를 만듭니다.
const router = new VueRouter({\n routes // short for `routes: routes`\n})Step 6: 루트 Vue 인스턴스를 만들고 mount합니다.
const app = new Vue({\n router\n}).$mount('#app')이제 Vue 어플리케이션에서 다른 페이지(Home, Services)로 네비게이트 할 수 있습니다.
\n주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 동적 세그먼트를 이용해 /user/john/post/123나 /user/jack/post/235와 같이 매핑된 URL을 가지는 컴포넌트를 만들어봅시다.
const User = {\n template: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>'\n}\n\nconst router = new VueRouter({\n routes: [\n // dynamic segments start with a colon\n { path: '/user/:name/post/:postid', component: User }\n ]\n})매개 변수와 함께 라우트를 사용할 때 주의 해야할 점은 사용자가 /user/foo에서 /user/bar로 이동할 때 동일한 컴포넌트 인스턴스가 재사용된다는 것입니다. 두 라우트 모두 동일한 컴포넌트를 렌더링하므로 이전 인스턴스를 삭제 한 다음 새 인스턴스를 만드는 것보다 효율적입니다. 그러나 이는 또한 컴포넌트의 라이프 사이클 훅이 호출되지 않음을 의미합니다.
동일한 컴포넌트의 params 변경 사항에 반응하려면 $route 객체를 보면됩니다.
watch에서 $route 관찰하기:const User = {\n template: '<div>User {{ $route.params.name }} </div>',\n watch: {\n '$route' (to, from) {\n // react to route changes...\n }\n }\n}beforeRouteUpdate 네비게이션 가드를 사용하기:const User = {\n template: '<div>User {{ $route.params.name }} </div>',\n beforeRouteUpdate (to, from, next) {\n // react to route changes and then call next()\n }\n}beforeRouteEnter 가드에서는 this에 접근할 권한이 없다는 것을 기억하세요. 대신, next 콜백 함수를 이용해 인스턴스에 접근할 수 있습니다.
동일한 URL이 여러 라우트와 일치하는 경우가 있습니다. 이 경우 일치하는 우선 순위는 라우트 정의의 순서에 따라 결정됩니다. 즉, 경로가 더 먼저 정의 될수록 우선 순위가 높아집니다.
\nconst router = new VueRouter({\n routes: [\n // dynamic segments start with a colon\n { path: '/user/:name', component: User } // This route gets higher priority\n { path: '/user/:name', component: Admin }\n { path: '/user/:name', component: Customer }\n ]\n })일반적으로 어플리케이션은 여러 단계의 중첩된 컴포넌트로 이루어져 있습니다. URL의 세그먼트 역시 중첩된 컴포넌트의 특정 구조와 일치합니다. 중첩된 아웃렛에서 컴포넌트를 렌더링하려면 VueRouter 생성자에서 config로 children을 설정해야 합니다.
프로필과 포스트들이 상대적인 경로로 설정된 어플리케이션을 만들어봅시다. 매칭되는 하위 라우트가 없을 경우에 렌더링되는 라우트 컴포넌트를 설정할 수 있습니다.
\nconst router = new VueRouter({\n routes: [\n { path: '/user/:id', component: User,\n children: [\n {\n // UserProfile will be rendered inside User's <router-view> when /user/:id/profile is matched\n path: 'profile',\n component: UserProfile\n },\n {\n // UserPosts will be rendered inside User's <router-view> when /user/:id/posts is matched\n path: 'posts',\n component: UserPosts\n },\n // UserHome will be rendered inside User's <router-view> when /user/:id is matched\n { path: '',\n component: UserHome },\n ]\n }\n ]\n})아마 하나의 페이지에서 HTML, CSS, JavaScript을 다른 파일로 분리해 관리해본 경험이 있을 것입니다. 하지만 싱글 파일 컴포넌트에서는 템플릿과 스타일, 로직들을 하나의 파일에 정리합니다.
\n<template>\n <div>\n <h1>Welcome {{ name }}!</h1>\n </div>\n</template>\n\n<script>\n module.exports = {\n data: function() {\n return {\n name: 'John'\n }\n }\n }\n</script>\n\n<style scoped>\n h1 {\n color: #34c779;\n padding: 3px;\n }\n</style>주목해야 할 중요한 점은 관심사 분리가 파일 타입 분리와 같지 않다는 것입니다. 현대적인 UI 개발에서 코드베이스를 서로 얽혀있는 세 개의 거대한 레이어로 나누는 대신, 느슨하게 결합 된 컴포넌트로 나누고 구성하는 것이 더 중요합니다. 컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되면 컴포넌트의 응집력과 유지 보수성이 향상됩니다.
\n싱글 파일 컴포넌트에 대한 아이디어가 마음에 들지 않더라도 JavaScript와 CSS를 별도의 파일로 분리하여 핫 리로드 및 사전 컴파일 기능을 활용할 수 있습니다.
\n<template>\n <div>This section will be pre-compiled and hot reloaded</div>\n</template>\n<script src="./my-component.js"></script>\n<style src="./my-component.css"></style>복잡한 프로젝트의 경우 또는 프론트엔드가 JavaScript 기반인 경우 단점이 분명해집니다. 싱글 파일 컴포넌트가 아닌 경우에는 아래와 같은 문제점이 있을 수 있습니다.
\n싱글 파일 컴포넌트는 JavaScript 기반에서 발생하는 문제점을 해결하기 위해, 별도의 .vue 확장자의 파일로 작성합니다.
filter는 텍스트 형식화를 위해 사용됩니다. 이 필터들은 자바스크립트 표현식에 파이프(|) 기호와 함께 추가되어야 합니다. 크게 두 가지 경우에서 사용될 수 있습니다.
v-bind 표현식첫 글자를 대문자로 만드는 로컬 필터를 정의해봅시다.
\nfilters: {\n capitalize: function (value) {\n if (!value) return ''\n value = value.toString()\n return value.charAt(0).toUpperCase() + value.slice(1)\n }\n}이 필터를 중괄호 보간법 또는 v-bind 표현식 함께 사용할 수 있습니다.
<!-- in mustaches -->\n{{ username | capitalize }}\n\n<!-- in v-bind -->\n<div v-bind:id="username | capitalize"></div>filters: {\n capitalize: function (value) {\n if (!value) return ''\n value = value.toString()\n return value.charAt(0).toUpperCase() + value.slice(1)\n }\n}Vue.filter('capitalize', function (value) {\n if (!value) return ''\n value = value.toString()\n return value.charAt(0).toUpperCase() + value.slice(1)\n})\n\nnew Vue({\n // ...\n})일반적으로 아래와 같이, 표현식에서 필터 뒤에 또 다른 필터를 사용할 수 있습니다.
\n{{ message | filterA | filterB | filterC ... }}각각의 필터는 파이프(|)로 구분되며, message는 filterA의 결과가 filterB의 영향을 받고, 그 결과가 다시 filterC의 영향을 받습니다.
예를 들어, 날짜 형식의 데이터를 변경한 뒤 대문자로 변경하고 싶다면 아래와 같이 사용할 수 있습니다.
\n{{ birthday | dateFormat | uppercase }}필터는 기본적으로 자바스크립트 함수이기 때문에, 아래와 같이 두 개 이상의 인수를 받을 수 있습니다.
\n{{ message | filterA('arg1', arg2) }}여기서 filterA는 세 개의 인수를 받는 함수로 정의되었습니다. message의 값은 첫번째 인수로 전달될 것이며, 순수 문자열인 'arg1'은 두번째 인수로 전달될 것이며, 자바스크립트 표현식인 arg2는 표현식이 실행된 이후에 세번째 인수로 전달될 것입니다.
{{ 2 | exponentialStrength(10) }} // prints 2 power 10 = 1024플러그인은 일반적으로 전역 수준 기능을 Vue 어플리케이션에 추가합니다.
\n<vue-custom-element>)Vue.prototype를 이용해 Vue에 인스턴스 메소드를 추가플러그인에서는 install 메소드를 정의해야 합니다. 이 메소드는 첫 번째 인자로 Vue 생성자와 외부에서 설정 가능한 옵션을 파라미터로 전달받습니다.
MyPlugin.install = function (Vue, options) {\n // 1. add global method or property\n Vue.myGlobalMethod = function () {\n // some logic ...\n }\n\n // 2. add a global asset\n Vue.directive('my-directive', {\n bind (el, binding, vnode, oldVnode) {\n // some logic ...\n }\n ...\n })\n\n // 3. inject some component options\n Vue.mixin({\n created: function () {\n // some logic ...\n }\n ...\n })\n\n // 4. add an instance method\n Vue.prototype.$myMethod = function (methodOptions) {\n // some logic ...\n }\n}Vue.use() 전역 메소드를 호출하여 플러그인을 사용할 수 있습니다. 이 함수는 생성자 new Vue()로 Vue 인스턴스를 생성하기 전에 호출되어야 합니다.
// calls `MyPlugin.install(Vue, { someOption: true })`\nVue.use(MyPlugin)\n\nnew Vue({\n //... options\n})Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. 믹스인에 존재하는 기능들은 호출된 컴포넌트의 기능들과 합쳐집니다.
\nmixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 다른 컴포넌트에서 재사용될 수 있는 created 라이프사이클 훅을 가진 믹스인을 작성해봅시다.
const myMixin = {\n created(){\n console.log("Welcome to Mixins!")\n }\n}\nvar app = new Vue({\n el: '#root',\n mixins: [myMixin]\n})Note: 여러 믹스인은 배열의 형태로 사용할 수 있습니다.
\nVue 어플리케이션의 모든 컴포넌트에 동일한 옵션이나 기능을 확장해 사용할 필요가 있을 수 있습니다. 이 경우, 전역 믹스인을 활용해 Vue의 모든 컴포넌트에 영향을 줄 수 있습니다.
\nVue.mixin({\n created(){\n console.log("Write global mixins")\n }\n})\n\nnew Vue({\n el: '#app'\n})위의 전역 믹스인은 해당 Vue 인스턴스에서 각 컴포넌트가 생성될 때마다 created 훅에서 로그를 발생시킵니다. 즉 모든 단일 Vue 인스턴스에 영향을 주기 때문에 적게 이용하고 신중하게 사용해야 합니다.
Vue CLI를 사용한다면, 믹스인은 일반적으로 /src/mixins 디렉토리에서 .js파일로 작성합니다. export 키워드로 외부에 내보낸다는 것을 선언해야 하며 사용할 Vue 컴포넌트에서 import 키워드로 불러올 수 있습니다.
믹스인과 컴포넌트에서 충돌하는 옵션이 있다면, 옵션은 몇 가지 방법을 통해 충돌하는 옵션을 병합합니다.
\ndata는 재귀적으로 병합하되, 충돌되는 속성은 컴포넌트의 데이터가 우선적으로 병합됩니다.var mixin = {\n data: function () {\n return {\n message: 'Hello, this is a Mixin'\n }\n }\n }\nnew Vue({\n mixins: [mixin],\n data: function () {\n return {\n message: 'Hello, this is a Component'\n }\n },\n created: function () {\n console.log(this.$data); // => { message: "Hello, this is a Component'" }\n }\n})const myMixin = {\n created(){\n console.log("Called from Mixin")\n }\n}\n\nnew Vue({\n el: '#root',\n mixins:[myMixin],\n created(){\n console.log("Called from Component")\n }\n})\n\n//Called from Mixin\n//Called from Componentmethods, components, directives 역시 재귀적으로 병합하되, 이러한 객체에 충돌하는 키가 있을 경우 컴포넌트의 옵션이 우선순위를 갖습니다.var mixin = {\n methods: {\n firstName: function () {\n console.log('John')\n },\n contact: function () {\n console.log('+65 99898987')\n }\n }\n}\n\nvar vm = new Vue({\n mixins: [mixin],\n methods: {\n lastName: function () {\n console.log('Murray')\n },\n contact: function () {\n console.log('+91 893839389')\n }\n }\n})\n\nvm.firstName() // "John"\nvm.lastName() // "Murray"\nvm.contact() // "+91 893839389"Vue에서는 사용자 지정 옵션을 병합할 때 기본적으로 기존 값을 덮어는 방법을 이용합니다. 만약 사용자 정의의 로직을 사용해 커스텀 옵션을 병합하려면,Vue.config.optionMergeStrategies에 함수를 추가할 필요가 있습니다.
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {\n // return mergedVal\n}더 고급 예제는 Vuex의 1.x 병합 전략에서 확인하실 수 있습니다.
\nconst merge = Vue.config.optionMergeStrategies.computed\nVue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {\n if (!toVal) return fromVal\n if (!fromVal) return toVal\n return {\n getters: merge(toVal.getters, fromVal.getters),\n state: merge(toVal.state, fromVal.state),\n actions: merge(toVal.actions, fromVal.actions)\n }\n}지시자는 DOM 엘리먼트에 부착할 수 있는 명령어입니다. 위에서 본 것처럼 v-로 시작하는 문법을 사용해 Vue가 이 명령어를 인식할 수 있도록 해야 합니다. 일반적으로 하위 수준의 DOM을 제어하기 위해 직접 접근해야 할 필요가 있을 때 유용하게 사용됩니다.
페이지가 로드될 때 input에 자동으로 포커싱되는 사용자 정의 지시자를 전역으로 만들어봅시다.
// Register a global custom directive called `v-focus`\nVue.directive('focus', {\n // When the bound element is inserted into the DOM...\n inserted: function (el) {\n // Focus the element\n el.focus()\n }\n})이제 이 지시자는 v-focus라는 문법과 함께 어떤 컴포넌트에서든 사용될 수 있습니다.
<input v-focus>지시자를 지역 등록하기 위해서는 directives 옵션을 이용합니다.
directives: {\n focus: {\n // directive definition\n inserted: function (el) {\n el.focus()\n }\n }\n}이 지시자는 선언된 해당 컴포넌트에서만 사용될 수 있습니다.
\n<input v-focus>지시자 객체가 등록될 때 몇 개의 라이프 사이클 훅을 제공합니다.
\nbind: 지시자가 처음 엘리먼트에 부착될 때 한 번 호출됩니다.inserted: 지시자가 부착된 엘리먼트가 DOM에 삽입되었을 때 호출됩니다.update: 해당 엘리먼트가 업데이트 될 때 호출됩니다. 하지만 아직 하위 엘리먼트는 업데이트 되지 않은 상태입니다.componentUpdated: 하위 컴포넌트까지 업데이트 된 상태일 때 호출됩니다.unbind: 지시자가 엘리먼트에서부터 삭제될 때 호출됩니다.Note: 위의 훅에서는 특정한 전달인자(Argument)를 받는다.
\n모든 훅에서는 전달인자로 el, binding와 vnode를 갖고 있습니다. 그와 함께, update와 componentUpdated훅에서는 새 값과 이전 값을 비교하기 위해 oldVnode를 추가적으로 갖고 있습니다.
el: 해당 지시자가 부착된 엘리먼트로, 이를 이용해 DOM을 조작할 수 있습니다.binding: 아래의 속성을 가진 객체입니다.
\nname: 지시자의 이름으로, v- 접두사가 제거된 이름입니다.value: 지시자에서 전달 받은 값입니다. 만약 v-my-directive="1 + 1"라면 2가 됩니다.oldValue: 이전 값으로, update와 componentUpdated훅에서만 사용할 수 있습니다. 이를 통해 값이 변경되었는지 아닌지를 확인할 수 있습니다.expression: 문자열로 바인딩된 표현식입니다. 만약 v-my-directive="1 + 1"라면 "1 + 1"이 됩니다..arg: 지시자의 전달인자입니다. 만약 v-my-directive:foo라면 "foo"가 됩니다..modifiers: 수식어가 포함된 객체입니다. 만약 v-my-directive.foo.bar라면 { foo: true, bar: true }가 됩니다.vnode: Vue의 컴파일러에 의해 생성된 가상 노드입니다.oldVnode: 이 전의 가상 노드로, update와 componentUpdated훅에서만 사용할 수 있습니다.
지시자는 유효한 자바스크립트 표현식은 모두 수용할 수 있습니다. 따라서 지사자에 여러 값들을 전달하려면, 자바스크립트 객체 리터럴을 이용해 전달할 수 있습니다.
\n<div v-avatar="{ width: 500, height: 400, url: 'path/logo', text: 'Iron Man' }"></div>이제 v-avatar 지시자를 전역으로 설정해봅시다.
Vue.directive('avatar', function (el, binding) {\n console.log(binding.value.width) // 500\n console.log(binding.value.height) // 400\n console.log(binding.value.url) // path/logo\n console.log(binding.value.text) // "Iron Man"\n})드문 경우지만, 다른 훅과는 상관없이 bind나 update 훅에서 같은 동작을 하기 원할 수 있습니다. 이 경우에는 함수 약어를 사용할 수 있습니다.
Vue.directive('theme-switcher', function (el, binding) {\n el.style.backgroundColor = binding.value\n})일반적인 경우 Vue의 템플릿을 이용해 HTML을 작성하는 것을 권장합니다. 하지만 input이나 slot의 값을 이용해 동적인 컴포넌트를 생성하는 것처럼, 일부 특별한 경우에는 JavaScript가 필요한 경우가 있습니다. 이때 render 함수를 사용하며, render함수는 JavaScript로 작성하기 때문에 프로그래밍 환경을 온전히 이용할 수 있다는 장점이 있습니다.
render 함수는 createElement라는 함수를 첫 번째 인자로 받아 가상 노드를 생성하는 함수입니다. 내부적으로 Vue의 템플릿은 빌드 타임에서 render 함수를 이용해 컴파일하고 있습니다. 그러므로 템플릿은 render 함수를 문법적으로 보기 쉽게 만들어 놓은 것에 가깝습니다.
<template>\n <div :class="{'is-rounded': isRounded}">\n <p>Welcome to Vue render functions</p>\n </div>\n</template>위의 템플릿을 render 함수로 작성하면 아래와 같습니다.
render: function (createElement) {\n return createElement('div', {\n 'class': {\n 'is-rounded': this.isRounded\n }\n }, [\n createElement('p', 'Welcome to Vue render functions')\n ]);\n },createElement 함수는 몇 가지의 약속된 전달인자를 받는데, 이를 이용해 템플릿에서 사용되는 기능을 JavaScript 코드로 작성할 수 있습니다.
// @returns {VNode}\ncreateElement(\n // An HTML tag name, component options, or async function resolving to one of these.\n // Type is {String | Object | Function}\n // Required.\n 'div',\n\n // A data object corresponding to the attributes you would use in a template.\n //Type is {Object}\n // Optional.\n {\n // Normal HTML attributes\n attrs: {\n id: 'someId'\n },\n // Component props\n props: {\n myProp: 'somePropValue'\n },\n // DOM properties\n domProps: {\n innerHTML: 'This is some text'\n },\n // Event handlers are nested under `on`\n on: {\n click: this.clickHandler\n },\n // Similar to `v-bind:style`, accepting either a string, object, or array of objects.\n style: {\n color: 'red',\n fontSize: '14px'\n },\n //Similar to `v-bind:class`, accepting either a string, object, or array of strings and objects.\n class: {\n classsName1: true,\n classsName2: false\n },\n ....\n },\n\n // Children VNodes, built using `createElement()`, or using strings to get 'text VNodes'.\n // Type is {String | Array}\n // Optional.\n [\n 'Learn about createElement arguments.',\n createElement('h1', 'Headline as a child virtual node'),\n createElement(MyComponent, {\n props: {\n someProp: 'This is a prop value'\n }\n })\n ]\n)컴포넌트 트리의 모든 가상 노드(VNodes)는 고유해야 합니다. 즉, 직접 가상 노드를 여러 번 사용할 수는 없습니다. 만약 같은 엘리먼트나 컴포넌트를 여러 번 반복해서 사용해야 한다면, 팩토리 패턴을 이용해 작성해야 합니다.
\n아래의 render 함수는 h1 엘리먼트를 세 번 반복하려 했기 때문에 유효하지 않습니다.
render: function (createElement) {\n var myHeadingVNode = createElement('h1', 'This is a Virtual Node')\n return createElement('div', [\n myHeadingVNode, myHeadingVNode, myHeadingVNode\n ])\n}팩토리 패턴을 이용하면 됩니다.
\nrender: function (createElement) {\n return createElement('div',\n Array.apply(null, { length: 3 }).map(function () {\n return createElement('h1', 'This is a Virtual Node')\n })\n )\n}Vue에서 HTML을 작성하는데 사용되는 템플릿과 render 함수를 비교해봅시다.
\n| 템플릿(Templates) | \n렌더 함수(Render function) | \n
|---|---|
v-if와 v-for를 이용해 조건문/반복문 실행 | \nJavaScript의 if else문과 map 메소드로 조건문/반복문 실행 | \n
v-model로 양방향 바인딩 | \n바인딩과 이벤트를 직접 설정 | \n
Capture 이벤트 수식어는 .passive, .capture, .once, .capture.once, .once.capture | \n&, !, ~, ~! | \n
이벤트 수식어와 키 수식어: .stop, .prevent, .self, keys(.enter, .13) and Modifiers Keys(.ctrl, .alt, .shift, .meta) | \nJavaScript로 해결, event.stopPropagation(), event.preventDefault(), if (event.target !== event.currentTarget) return, if (event.keyCode !== 13) return, if (!event.ctrlKey) return | \n
| 슬롯 속성 활용 | \n렌더 함수의 this.$slots와 this.$scopedSlots 활용 | \n
함수형 컴포넌트는 context를 통해 전달받은 정보로만 생성되는 간단한 컴포넌트입니다.
data가 없습니다this가 없습니다이 경우, functional: true 속성을 이용해 컴포넌트를 함수형으로 작성할 수 있습니다.
Vue.component('my-component', {\n functional: true,\n // Props are optional\n props: {\n // ...\n },\n // To compensate for the lack of an instance,\n // we are now provided a 2nd context argument.\n render: function (createElement, context) {\n // ...\n }\n})| 특징 | \nVue | \nReact | \n
|---|---|---|
| 타입 | \nJavaScript MVC 프레임워크 | \nJavaScript 라이브러리 | \n
| 플랫폼 | \n웹을 우선적으로 | \n웹과 네이티브 모두 | \n
| 복잡도 | \n상대적으로 간단 | \n상대적으로 복잡 | \n
| 빌드 어플리케이션 | \nVue-cli | \nCRA (Create-React-App) | \n
Vue의 개발 초기 단계에서 AngularJS를 참고했기 때문에, Vue와 AngularJS의 문법은 상당히 비슷합니다. 하지만 차이점 역시 존재합니다.
\n| 특징 | \nVue | \nAngularJS | \n
|---|---|---|
| 복잡도 | \n배우기 쉬운 API와 디자인 | \n프레임워크가 꽤 크고 타입스크립트 등의 지식 필요 | \n
| 데이터 바인딩 | \n양방향 바인딩 | \n단방향 바인딩 | \n
| 초기 릴리즈 | \n2014 | \n2016 | \n
| 모델 | \n가상 DOM 기반 | \nMVC | \n
| 작성된 언어 | \nJavaScript | \nTypeScript | \n
<component> 태그에서 v-bind:is로 바인딩된 컴포넌트를 동적으로 전환할 수 있습니다.
new Vue({\n el: '#app',\n data: {\n currentPage: 'home'\n },\n components: {\n home: {\n template: "<p>Home</p>"\n },\n about: {\n template: "<p>About</p>"\n },\n contact: {\n template: "<p>Contact</p>"\n }\n }\n})이제 템플릿에서 <component> 태그에 바인딩 될 컴포넌트를 설정할 수 있습니다.
<div id="app">\n <component v-bind:is="currentPage">\n <!-- component changes when currentPage changes! -->\n <!-- output: Home -->\n </component>\n</div><keep-alive>는 컴포넌트의 상태를 보존해서 재 렌더링을 막아주는 추상 컴포넌트입니다. 만약 동적인 컴포넌트를 <keep-alive> 태그로 감싼다면, 컴포넌트 인스턴스를 없애지 않고 메모리에 유지해 보존합니다.
<!-- Inactive components will be cached! -->\n<keep-alive>\n <component v-bind:is="currentTabComponent"></component>\n</keep-alive>만약 조건문이 있다면, 해당 조건의 하위 컴포넌트만 렌더링됩니다.
\n<!-- multiple conditional children -->\n<keep-alive>\n <comp-a v-if="a > 1"></comp-a>\n <comp-b v-else></comp-b>\n</keep-alive>Note: <keep-alive>는 DOM에 렌더링 되지 않습니다.
대규모 응용 프로그램에서는 응용 프로그램을 더 작은 덩어리로 나누고 실제로 필요할 때만 서버에서 컴포넌트를 로드해야 할 수도 있습니다. Vue를 사용하면 컴포넌트 정의를 비동기식으로 해결하는 팩토리 함수로 컴포넌트를 정의 할 수 있습니다.
\nVue.component('async-webpack-example', function (resolve, reject) {\n // Webpack automatically split your built code into bundles which are loaded over Ajax requests.\n require(['./my-async-component'], resolve)\n})Vue는 Vue는 컴포넌트가 렌더링되어야 할 때만 팩토리 함수를 실행시키고, 이후의 나중에 있을 리렌더링을 위해 결과를 캐시합니다.
\n비동기 컴포넌트 팩토리는 다음 형태의 객체를 반환할 수 있습니다.
\nconst AsyncComponent = () => ({\n // The component to load (should be a Promise)\n component: import('./MyComponent.vue'),\n // A component to use while the async component is loading\n loading: LoadingComponent,\n // A component to use if the load fails\n error: ErrorComponent,\n // Delay before showing the loading component. Default: 200ms.\n delay: 200,\n // The error component will be displayed if a timeout is\n // provided and exceeded. Default: Infinity.\n timeout: 3000\n})하위 컴포넌트에 inline-template 속성이 존재할 때, 컴포넌트는 내부 컨텐츠를 템플릿으로 사용합니다. 따라서 보다 유연한 템플릿 작성이 가능합니다.
<my-component inline-template>\n <div>\n <h1>Inline templates</p>\n <p>Treated as component component owne content</p>\n </div>\n</my-component>Note: inline-template은 템플릿의 범위를 추론하기 어렵게 만듭니다. 가장 좋은 방법은 template 옵션을 사용하거나 .vue 파일의 template 엘리먼트를 사용하여 컴포넌트 내부에 템플릿을 정의하는 것입니다.
템플릿를 정의하는 또 다른 방법은 text/x-template 유형의 스크립트 엘리먼트 내부의 ID로 템플릿을 참조하는 것입니다.
<script type="text/x-template" id="script-template">\n <p>Welcome to X-Template feature</p>\n</script>Vue.component('x-template-example', {\n template: '#script-template'\n})Vue.component('recursive-component', {\n template: `<!--Invoking myself!-->\n <recursive-component></recursive-component>`\n});재귀 컴포넌트는 블로그의 덧글이나 메뉴처럼 상위 컴포넌트와 하위 컴포넌트가 동등한 기능을 할 때 유용합니다.
\nNote: 위와 같은 컴포넌트는 최대 스택 크기 초과 오류가 발생하므로 재귀 호출이 조건부인지 확인해야 합니다.
\n복잡한 어플리케이션에서 Vue 컴포넌트가 서로가 서로를 호출하고 있는 상황이 발생할 수 있습니다. 컴포넌트 A와 컴포넌트 B가 서로 순환 참조를 하고 있는 상황을 살펴봅시다.
\n//ComponentA\n<div>\n <component-b >\n</div>\n \n//ComponentB\n<div>\n <component-b >\n</div>이런 경우는 beforeCreate 라이프 사이클 훅 시점까지 기다렸다가 해당 컴포넌트를 등록하거나, 웹팩의 비동기 import를 활용합니다.
Solution1:
\nbeforeCreate: function () {\n this.$options.components.componentB = require('./component-b.vue').default\n}Solution2:
\ncomponents: {\n componentB: () => import('./component-b.vue')\n}Google 크롬 앱과 같은 일부 환경에서는 CSP(컨텐츠 보안 정책)를 적용하여 표현식을 평가하는 데 new Function() 을 사용할 수 없습니다. 전체 빌드는 이 기능을 사용하여 템플릿을 컴파일하므로 이러한 환경에서는 사용할 수 없습니다.
반면 런타임 전용 빌드는 CSP와 완벽하게 호환됩니다. Webpack + vue-loader 또는 Browserify + vueify로 런타임 전용 빌드를 사용하는 경우 템플릿은 CSP 환경에서 완벽하게 작동하는 render 함수로 미리 컴파일됩니다.
1. 전체 빌드(Full): 컴파일러와 런타임 빌드를 동시에 포함합니다. 템플릿을 작성한 경우 필요합니다.
\n2. 런타임 빌드(Runtime): Vue 인스턴스 생성과 render 함수, 가상 돔을 포함하고 있지만 컴파일러 빌드를 포함하고 있지 않습니다.
| 타입 | \nUMD | \nCommonJS | \nES Module (for bundlers) | \nES Module (for browsers) | \n
|---|---|---|---|---|
| 전체 빌드 | \nvue.js | \nvue.common.js | \nvue.esm.js | \nvue.esm.browser.js | \n
| 런타임 빌드 | \nvue.runtime.js | \nvue.runtime.common.js | \nvue.runtime.esm.js | \nNA | \n
| 전체 빌드 (배포 모드) | \nvue.min.js | \nNA | \nNA | \nvue.esm.browser.min.js | \n
| 런타임 빌드 (배포 모드) | \nvue.runtime.min.js | \nNA | \nNA | \nNA | \n
alias를 이용해 Vue를 설정할 수 있습니다.
module.exports = {\n // ...\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1\n }\n }\n}Vue는 컴파일러를 이용해 템플릿을 render 함수로 변환합니다.
// this requires the compiler\nnew Vue({\n template: '<div>{{ message }}</div>'\n})\n\n// this does not\nnew Vue({\n render (h) {\n return h('div', this.message)\n }\n})